<!-- 敏感词设置 -->
<template>
  <div class='sensitiveWord'>
    <el-card class="box-card" shadow="always">
      <h3 class="tipsDescribe">提示</h3>
      <div class="text item">
        多个关键字请用 “|” 隔开。
      </div>
      <div class="text item">
        关键字支持使用正则表达式。
      </div>
      <h3 class="tipsDescribe">垃圾信息过滤</h3>
      <el-form :model="ruleForm" ref="ruleForm" label-width="auto" class="demo-ruleForm">
        <el-form-item label="垃圾信息关键字(请用“|”隔开关键字) " prop="content">
          <el-input type="textarea" v-model="ruleForm.content" :rows="6"></el-input>
        </el-form-item>
        <el-form-item label="错误提示" prop="message">
          <el-input v-model="ruleForm.message"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size='medium' :loading="loading" @click="submitForm('ruleForm')"><span
              v-if="content.id">修改</span><span v-if="!content.id">保存</span></el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { dictGet, dictInsert, dictUpdate } from '../../../api/sensitiveWord'
export default {
  name: 'sensitiveWord',
  components: {},
  data () {
    return {
      // 数据
      ruleForm: {
        message: '',
        // 敏感词内容
        content: ''
      },
      // 按钮loading
      loading: false,
      // 必填项
      rules: {
        message: [
          { required: true, message: '请填写错误提示文字', trigger: 'blur' }
        ],
        content: [
          { required: true, message: '请填写垃圾信息关键字', trigger: 'blur' }
        ]
      },
      content: {}
    };
  },
  computed: {},
  watch: {},
  methods: {
    // 提交请求
    submitForm (formName) {
      this.loading = true
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 没有id的时候是 保存有id的时候是修改
          if (!this.content.id) {
            dictInsert(this.ruleForm).then(res => {
              if (res.success) {
                this.$message.success('保存成功')
                this.loading = false
                console.log(this.ruleForm, '可以走接口了')
              } else {
                this.$message.success(res.msg)
                this.loading = false
              }
            })
          } else {
            this.ruleForm.id = this.content.id
            dictUpdate(this.ruleForm).then(res => {
              if (res.success) {
                this.$message.success('修改成功')
                this.loading = false
                console.log(this.ruleForm, '可以走接口了')
              } else {
                this.$message.success(res.msg)
                this.loading = false
              }
            })
          }
        } else {
          this.loading = false
          return false;
        }
      });
    },
    // 查询敏感词 接口 默认查询
    dictGet () {
      dictGet().then(res => {
        if (res.success) {
          console.log(res.data, '查询成工')
          // 敏感词提示语
          this.ruleForm.message = res.data.message || ''
          // 敏感词内容
          this.ruleForm.content = res.data.content || ''
          this.content = res.data
        }
      })
    }
  },
  created () {
    // 已进入页面自动查询
    this.dictGet()
  },
  mounted () {

  },
  beforeCreate () { },
  beforeMount () { },
  beforeUpdate () { },
  updated () { },
  beforeDestroy () { },
  destroyed () { },
  activated () { },
}
</script>
<style scoped>
.sensitiveWord {
    position: relative;
    height: 97%;
}

.tipsDescribe {
    line-height: 60px;
}
.demo-ruleForm {
    width: 60%;
}
.demo-ruleForm /deep/ .el-form-item__label-wrap {
    margin-left: 0px !important;
}

.sensitiveWord /deep/ .el-card {
    height: 100%;
}
</style>